<template>
  <div>
    <div class="main">
      <div class="title">每日一答</div>
      <div class="content">
        <img class="tree" src="@/assets/images/answer/tree.png" alt />
        <div class="top">{{question.question}}</div>
        <div class="item">
          <div class="chioce" :class="{'chioce1':active==='A'}" @click="changechioce('A')">
            A、{{question.selectA}}
            <img
              v-if="active==='A' && rightquesiton && rightquesiton != 'A'"
              class="cha"
              src="@/assets/images/answer/cha.png"
              alt
            />
            <img
              v-if="active==='A' && (bingo==='A' || rightquesiton && rightquesiton == 'A')"
              class="cha"
              src="@/assets/images/answer/gou.png"
              alt
            />
          </div>
          <div class="chioce" @click="changechioce('B')" :class="{'chioce1':active==='B'}">
            B、{{question.selectB}}
            <img
              v-if="active==='B' && rightquesiton && rightquesiton != 'B'"
              class="cha"
              src="@/assets/images/answer/cha.png"
              alt
            />
            <img
              v-if="active==='B' && (bingo==='B' || rightquesiton && rightquesiton == 'B')"
              class="cha"
              src="@/assets/images/answer/gou.png"
              alt
            />
          </div>
          <div
            v-if="question.selectC"
            class="chioce"
            @click="changechioce('C')"
            :class="{'chioce1':active==='C'}"
          >
            C、{{question.selectC}}
            <img
              v-if="active==='C' && rightquesiton && rightquesiton != 'C'"
              class="cha"
              src="@/assets/images/answer/cha.png"
              alt
            />
            <img
              v-if="active==='C' && (bingo==='C' || rightquesiton && rightquesiton == 'C')"
              class="cha"
              src="@/assets/images/answer/gou.png"
              alt
            />
          </div>
          <div
            v-if="question.selectD"
            class="chioce"
            @click="changechioce('D')"
            :class="{'chioce1':active==='D'}"
          >
            D、{{question.selectD}}
            <img
              v-if="active==='D' && rightquesiton && rightquesiton != 'D'"
              class="cha"
              src="@/assets/images/answer/cha.png"
              alt
            />
            <img
              v-if="active==='D' && (bingo==='D' || rightquesiton && rightquesiton == 'D')"
              class="cha"
              src="@/assets/images/answer/gou.png"
              alt
            />
          </div>
        </div>
        <div v-if="rightquesiton" class="er_message">正确答案：{{rightquesiton}}</div>
      </div>
      <div class="btn" @click="surn">{{text}}</div>
    </div>
  </div>
</template>
<script>
// import weixin from '@/components/wx/wx.js';
// import { baseUrl } from '@/config/env';
import { Toast, Dialog } from 'vant';
export default {
  data() {
    return {
      active: '',
      question: '',
      rightquesiton: '',
      bingo: '',
      text: '确定'
    };
  },
  created() {
    this.$http.post('/tuser/userInfo', {}).then(res => {
      if (res) {
        if (res.data.code === '0') {
          if (res.data.object.isAuth === '0') {
            Dialog.alert({
              title: '提示',
              message: '您还未实名认证,无法参与答题'
            }).then(() => {
              this.$router.push('/home');
            });
          } else {
            this.check();
          }
        }
      }
    });
    // this.getquestion();
  },
  mounted() {
    document.querySelector('body').setAttribute('style', 'background:#abd3fb');
  },
  destroyed() {
    document.querySelector('body').setAttribute('style', 'background:#f5f5f5');
  },
  methods: {
    // 获取今日是否已答题
    check() {
      this.$http.post('investigationQuestion/isAnswer').then(res => {
        console.log(res);
        if (res.data.code !== '0') {
          Dialog.alert({
            title: '提示',
            message: '您今日已参与答题,请明日再来！'
          }).then(() => {
            this.$router.push('/home');
          });
        } else {
          this.getquestion();
        }
      });
    },
    // 获取单个题目
    getquestion() {
      this.$http.post('investigationQuestion/getRandom').then(res => {
        console.log(res);
        this.question = JSON.parse(res.data.question);
        this.id = res.data.id;
        console.log(this.question);
      });
    },
    // 改变选项
    changechioce(data) {
      this.active = data;
      console.log(this.active);
    },
    // 确定
    surn() {
      if (this.text === '确定') {
        if (this.active) {
          this.$http
            .post('investigationQuestion/answer', {
              id: this.id.toString(),
              answer: this.active
            })
            .then(res => {
              console.log(res);
              if (res.data.code === '0') {
                this.bingo = this.active;
                Dialog.alert({
                  title: '回答正确',
                  message: '已获取每日答题积分'
                }).then(() => {
                  this.text = '返回';
                });
              } else {
                this.rightquesiton = res.data.object;
                this.text = '返回';
              }
            });
        } else {
          Toast('请选择答案');
        }
      } else {
        this.$router.push('/home');
      }
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.main {
  .title {
    height: 267px;
    background-image: linear-gradient(90deg, #3087ef 0%, #74b5f7 100%),
      linear-gradient(#31b44f, #31b44f);
    background-blend-mode: normal, normal;
    text-align: center;
    line-height: 267px;
    font-size: 61px;
    color: #ffffff;
    font-weight: bold;
  }
  .content {
    width: 690px;
    min-height: 720px;
    background-color: #ffffff;
    border-radius: 27px;
    margin: -70px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    .tree {
      position: absolute;
      top: 90px;
      right: 30px;
      width: 83px;
    }
    .top {
      width: 500px;
      text-align: center;
      margin-top: 40px;
      font-size: 32px;
      font-weight: bold;
    }
    .item {
      margin-top: 30px;
      .chioce {
        width: 573px;
        min-height: 100px;
        background-color: #ffffff;
        border-radius: 12px;
        border: solid 1px #3188ef;
        margin-top: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 38px;
        padding: 15px;
      }
      .chioce1 {
        width: 573px;
        min-height: 100px;
        background-color: #3188ef;
        border-radius: 12px;
        border: solid 1px #3188ef;
        margin-top: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 38px;
        padding: 15px;
        color: #ffffff;
        .cha {
          width: 35px;
          margin-left: 30px;
        }
      }
    }
  }
  .btn {
    width: 690px;
    height: 88px;
    background-color: #3188ef;
    border-radius: 8px;
    margin-top: 120px;
    margin: 120px auto;
    text-align: center;
    line-height: 88px;
    font-size: 38px;
    color: #ffffff;
  }
  .er_message {
    font-size: 36px;
    color: #fe0202;
    margin-top: 30px;
  }
}
</style>
